<template>
  
  <div id="mybook">
    <HeaderWithSearch></HeaderWithSearch>
    <FuncSwich active="mybook"></FuncSwich>
    <!-- 有本地缓存 -->
    <div class="full" v-if="local_book_count">
        <ul class="books" >
            <li class="book" v-for="book in Books" :key="book._id">

                <span class="cover">
                    <img v-bind:src="Config.API.Statics + book.cover">
                </span>

                <ul class="infos">
                    <li>
                        <router-link class="title" :to="{ path:'/reader', query: { book_id: book['_id']}}">
                            {{book.title}}
                        </router-link>
                    </li>
                    <li class="author">
                        {{book.author}}</li>
                    <li class="normalText">
                        {{book.lastChapter}}</li>
                </ul>

            </li>
        </ul>
    </div>
    

    <!-- 无本地缓存 -->
    <div class="full" v-if="!local_book_count">
        <div class="table">
            <span class="add">
                <router-link class="add_icon" to="/finding"><img class="add_a_book_icon" src=""></router-link>
                <br>
                <router-link class="add_text" to="/finding">添加书籍</router-link>
            </span>
        </div>
        
    </div>

  </div>

</template>

<script>
import HeaderWithSearch from './HeaderWithSearch'
import FuncSwich from './FuncSwich'
import Config from '../config'
export default {
    name: 'MyBook',
    components:{
      HeaderWithSearch,
      FuncSwich
    },
    data: function () {
        return {
            Books: [],
            Config: Config,
            local_book_count: false,
        }
    },
    beforeMount: function () {
        if (localStorage[Config.Cache.name]){
            let id_list = Object.keys(JSON.parse(localStorage[Config.Cache.name]).books);
            this.local_book_count = id_list.length;
            id_list.sort();
            id_list.forEach(id => {
                fetch(Config.PROX_GATE, {
                        method: "POST",
                        body: JSON.stringify({
                            'url': 'http://api.zhuishushenqi.com/book/' + id
                        }),
                    })
                    .then(res => res.json())
                    .then(res => {
                        this.Books.push(res);
                    })
            })
        }
    }
}
</script>

<style scoped>

.full {
    position: fixed;
    top: 100px;
    bottom: 0;
    left: 0;
    right: 0;
    overflow-y: auto;
}


.book {
    position: relative;
    padding: .5em;
    padding-bottom: 0;
    width: calc(100% - 1rem);
}

.cover img {
    width: 4em;
    height: auto;
}

.infos {
    position: absolute;
    top: .5em;
    left: 5em;

}

.title {
    font-size: 1rem;
    font-weight: bold;
    color: #b93221;
    cursor: pointer;
    
}
.author {
    font-size: .9rem;
    font-weight: lighter;
    color: #b93221;
    margin-top: .2em;
}
.normalText {
    font-size: .9rem;
    font-weight: lighter;
    margin-top: .2em;
}

.table {
    display: table;
    width: 100%;
    height: 100%;
}
.add {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}
.add_icon img{
    width: 21px;
    height: 21px;
}
.add_text {
    color: #121212;
    font-size: .9em;
    font-weight: lighter;
}
</style>
